import Grid from "@material-ui/core/Grid";
import {Schedule, Star} from "@material-ui/icons";
import * as React from "react";

//        level: 3,
//         name: "北海人民医院",
//         outpatient: {
//             endTime: "18:00",
//             startTime: "9:00"
//         }
const config = {
    11: "一丙医院",
    12: "一乙医院",
    13: "一甲医院",
    21: "二丙医院",
    22: "二乙医院",
    23: "二甲医院",
    31: "三丙医院",
    32: "三乙医院",
    33: "三甲医院",
};

const MyStars = ({stars}: any) => {
    const array = [];
    for (let i = 0; i < stars; i++) {
        array.push(<Star key={i}/>);
    }
    return <span>
        {
            array
        }
    </span>
};

export const HospitalInfo = ({data, itemClick}: any) => {
    const {name, level, outpatient, stars} = data;
    return <Grid container={true} className={"flex-center"} onClick={itemClick}>
        <Grid item={true} xs={3}>
            <img
                style={{width: "80px", height: "80px"}}
                alt="Adelle Charles"
                src={"../icons/hospital.png"}
            />
        </Grid>
        <Grid item={true} container={true} xs={8}>
            <Grid item={true} xs={12}>{name}</Grid>
            <Grid item={true} xs={4} style={{padding: "12px 0 12px 0"}}><span className={"button-tag"}>{config[level]}</span></Grid>
            <Grid item={true} xs={8} style={{padding: "12px 0 12px 0"}}><MyStars stars={stars}/></Grid>
            <Grid item={true} xs={12}>
                <Schedule className={"icon-font"}/>
                门诊工作时间：{outpatient.startTime}-{outpatient.endTime}</Grid>
        </Grid>
    </Grid>
};

export default HospitalInfo;